"use client";

import dynamic from "next/dynamic";
import { useMemo } from "react";
import "react-quill/dist/quill.snow.css";

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

type RichTextEditorProps = {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  className?: string;
  height?: number | string;
};

export default function RichTextEditor({
  value,
  onChange,
  placeholder,
  className,
  height = 240,
}: RichTextEditorProps) {
  const modules = useMemo(
    () => ({
      toolbar: [
        [{ header: [1, 2, 3, false] }],
        ["bold", "italic", "underline", "strike"],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ align: [] }],
        ["link", "clean"],
      ],
    }),
    []
  );

  const formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "list",
    "bullet",
    "align",
    "link",
  ];

  return (
    <div className={className}>
      <ReactQuill
        theme="snow"
        value={value || ""}
        onChange={(content) => onChange?.(content)}
        modules={modules}
        formats={formats}
        placeholder={placeholder || "请输入内容"}
        style={{ height }}
      />
    </div>
  );
}